<template>
  <div class="container" v-loading="status_loading">
    <el-row>
      <el-col :span="24" align="right">
        <el-button
          type="primary"
          @click="tableRowSelected.length?partitionModifyPopupVisible=true:callbackMessage($t('m.choose')+$t('m.page.partition'))"
        >{{$t('m.editState')}}</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" class="margin-10">
      <el-col :span="24" align="left">
        <h2 class="title">
          {{$t('m.page.warehouse')+$t('m.name')}}：
          <span>{{warehousename}}</span>
        </h2>
      </el-col>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          empty-text
          fits
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleMultiSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column
            align="center"
            prop="partitionname"
            :label="$t('m.page.partition')+$t('m.name')"
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="partitioncode"
            :label="$t('m.page.partition')+$t('m.code')"
            width="100"
          ></el-table-column>
          <el-table-column align="center" prop="typevalue" :label="$t('m.type')" width="100"></el-table-column>
          <el-table-column align="center" prop="isshelves" :label="$t('m.partition.isshelves')">
            <template slot-scope="scope">
              <span v-if="scope.row.isshelves==1">{{$t('m.yes')}}</span>
              <span v-if="scope.row.isshelves==0">{{$t('m.no')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('m.remark')"></el-table-column>
          <el-table-column align="center" prop="state" :label="$t('m.state')" width="80px">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">{{$t('m.started')}}</span>
              <span v-if="scope.row.state==0">{{$t('m.stopped')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.creator')"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column align="center" prop="editor" :label="$t('m.modifier')"></el-table-column>
          <el-table-column align="center" prop="modifydate" :label="$t('m.modifydate')"></el-table-column>
          <el-table-column align="center" prop="orderno" :label="$t('m.sortNumber')" width="80"></el-table-column>
          <el-table-column :label="$t('m.operation')" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click.stop="open(scope.row)" size="mini">{{$t('m.edit')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="goBack">
          <el-button type="primary" @click="$router.go(-1)">{{$t('m.back')}}</el-button>
        </div>
        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChangeInitFn"
          @size-change="handleSizeChangeInitFn"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 库区编辑 dialog 开始 -->
    <el-dialog
      @close="closeDialog"
      width="600px"
      :title="$t('m.edit')+$t('m.page.partition')"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :rules="ruleFormEdit" ref="ruleFormEdit" size="mini" :model="form">
        <el-form-item
          :label="$t('m.page.warehouse')+$t('m.name')"
          :label-width="formLabelWidth"
          prop="warehousename"
          align="left"
        >
          <el-input disabled size="mini" v-model="warehousename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('m.page.partition')+$t('m.name')"
          :label-width="formLabelWidth"
          prop="partitionname"
          align="left"
        >
          <el-input maxlength="20" show-word-limit size="mini" v-model="form.partitionname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('m.page.partition')+$t('m.code')"
          :label-width="formLabelWidth"
          prop="partitioncode"
          align="left"
        >
          <el-input maxlength="2" show-word-limit size="mini" v-model.trim="form.partitioncode" disabled></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('m.type')"
          :label-width="formLabelWidth"
          prop="typevalue"
          align="left"
        >
          <el-select
            @change="selectTypevalue"
            v-model="form.typevalue"
            :placeholder="$t('m.choose')"
          >
            <el-option
              v-for="item in typevalue"
              :key="item.typevaluenum"
              :label="item.typevalue"
              :value="item.typevaluenum"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('m.partition.isshelves')"
          :label-width="formLabelWidth"
          prop="isshelves"
          align="left"
        >
          <el-select v-model="stateValue" @change="getState" :placeholder="$t('m.choose')">
            <el-option
              v-for="item in isshelves"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.sortNumber')" :label-width="formLabelWidth" prop="orderno">
          <el-input @input="validateNumber('orderno')" maxlength="10" show-word-limit size="mini" v-model="form.orderno"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.remark')" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            maxlength="100"
            show-word-limit
            size="mini"
            v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="editCancel">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="change()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 库区编辑 dialog 结束 -->

    <!-- 批量修改状态dialog start -->
    <partitionModifyPopup
      v-if="partitionModifyPopupVisible"
      :popupVisible="partitionModifyPopupVisible"
      @close="partitionModifyPopupVisible=false"
      @triggerModify="modifyState"
    ></partitionModifyPopup>
    <!-- 批量修改状态dialog end -->
  </div>
</template>

<script>
import common from '@/utils/common'
import partitionModifyPopup from '@/components/partition/partition-modify-popup'

export default {
  name:'partitionList',

  data(){
    return {
      stateValue:'',
      status_loading:false,
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{
        isshelves:0,
        orderno:0,
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        remark:'',
        rows:0,
        typevalue:'',
        typevaluenum:0,
        warehouseid:0
      },
      formLabelWidth:'120px',
      warehouse:[],
      typevalue:[],
      warehouseid:null,
      warehousename:'',

      partitionModifyPopupVisible:false
    }
  },
  components:{ partitionModifyPopup },
  computed:{
    isshelves(){
      return [
        {
          value:'0',
          label:this.$t('m.no')
        },
        {
          value:'1',
          label:this.$t('m.yes')
        }
      ]
    },
    ruleFormEdit(){
      return {
        partitionname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.partition') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        partitioncode:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.partition') +
              this.$t('m.code'),
            trigger:'blur'
          }
        ],
        typevalue:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.type'),
            trigger:'change'
          }
        ],
        isshelves:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.partition.isshelves'),
            trigger:'change'
          }
        ],
        orderno:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.sortNumber'),
            trigger:'blur'
          }
        ]
      }
    }
  },
  watch:{

  },
  methods:{
    validateNumber(key){
      this.$set(this.form,key,this.form[key].replace(/[^\d]/g,''))
    },
    getState(val){
      this.form.isshelves = val
    },
    modifyState(state){
      if (state === '')
        return this.callbackMessage(this.$t('m.choose') + this.$t('m.state'))
      let ids = this.tableRowSelected.map(item => item.partitionid)

      let options = {
        method:'put',
        url:`/partition/state`,
        data:{ ids, state }
      }
      this.$axios(options).then(() => {
        this.init()
        this.partitionModifyPopupVisible = false
        this.callbackMessage(this.$t('m.editSuccess'))
      })
    },
    editCancel(){
      this.dialogFormVisible = false
      this.init()
    },
    init(){
      let that = this
      that.status_loading = true
      that
        .$axios({
          method:'get',
          url:'/partition/page',
          params:{
            page:this.page,
            rows:this.rowSize,
            warehouseid:this.warehouseid
          }
        })
        .then(({data})=> {
          for (let i = 0; i < data.page.records.length; i++){
            data.page.records[
              i
            ].createdate = common.timestampToTime(
              data.page.records[i].createdate
            )
            if (data.page.records[i].modifydate){
              data.page.records[
                i
              ].modifydate = common.timestampToTime(
                data.page.records[i].modifydate
              )
            } else {
              data.page.records[i].modifydate = '- -'
            }
          }

          that.tableData = data.page.records
          that.totalRows = data.page.total
          that.status_loading = false
        })
    },
    open(row){
      let that=this
      that.dialogFormVisible = true
      that.stateValue = row.isshelves ? that.$t('m.yes') : that.$t('m.no')
      that.$axios({
        method:'get',
        url:`/partition/${row.partitionid}`
      }).then(({data})=> {
        that.form = data
      })
    },
    getPartition(id){
      let that = this
      that.status_loading = true
      that
        .$axios({
          method:'get',
          url:`/partition/list/${id}`
        })
        .then(({data})=> {
          that.tableData = data.list
        })
    },
    getTypevalue(){
      this.$axios({
        method:'get',
        url:'/typevalue/list?name=库区类型'
      }).then(({data})=> {
        this.typevalue = data
      })
    },
    selectTypevalue(id){
      this.form.typevaluenum = id
      this.form.typevalue = this.typevalue.filter(function(item){
        return item.typevaluenum == id
      })[0].typevalue
    },
    change(){
      this.$refs['ruleFormEdit'].validate(valid => {
        if (valid){
          let that = this
          that
            .$axios({
              method:'put',
              url:'/partition/update',
              data:that.form
            })
            .then(({data})=> {
              that.$message({
                showClose:true,
                message:that.$t('m.editSuccess'),
                type:'success',
                duration:1000
              })
              that.dialogFormVisible = false
              that.page = 1
              that.init()
            })
        }
      })
    },
    closeDialog(){
      this.$refs['ruleFormEdit'].resetFields()
    }
  },
  activated(){
    this.warehouseid = this.$route.query.warehouseid
    this.warehousename = this.$route.query.warehousename
    this.init(1, 10)
    this.getTypevalue()
  },
  mounted(){
    this.$axios({
      method:'get',
      url:'/country/list'
    }).then(({data})=> {
      this.conuntryList = data
    })
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.partitionModifyPopupVisible=false
    next()
  }
}
</script>
<style  lang=scss scoped>
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
</style>
